<template>
  <q-card class="language-selector-view">
    <q-card-section style="height: 100%; overflow: hidden; padding: 0px">
      <div class="row" style="height: 100%">
        <left-view />
        <div class="col column justify-center right q-pl-lg">
          <q-btn
            class="close"
            fab-mini
            flat
            icon="close"
            size="sm"
            padding="none"
            v-close-popup
          />
          <div class="title">{{ $t('top.languageSelector.title') }}</div>
          <div class="description q-mb-lg">
            {{ $t('top.languageSelector.subtitle') }}
          </div>
          <div style="width: 50%">
            <q-input
              outlined
              filled
              v-model="filterStr"
              bg-color="primary"
              label-color="#4B4B4B"
              color="accent"
              class="filter-input q-mb-sm"
              :label="$t('top.languageSelector.inputPlaceholder')"
            >
              <template v-slot:prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>
            <div class="column selector-container q-mb-md q-pa-md">
              <q-checkbox
                v-model="selectedLanguage"
                v-for="(lang, index) in languageList"
                :key="index"
                :label="lang.label"
                :val="lang"
                keep-color
              />
            </div>
            <div class="row q-gutter-x-sm" style="min-height: 20px">
              <language-chip
                v-for="lang in selectedLanguage"
                :key="lang.code"
                :code="lang.code"
                active
              />
            </div>
            <q-btn
              rounded
              :label="$t('common.continue')"
              color="accent"
              class="full-width q-my-md"
              @click="submit"
              v-singular-event:btn:language-selected="selectedLanguage"
            />
            <q-btn
              rounded
              flat
              :label="$t('common.skip')"
              class="full-width"
              @click="skip"
            />
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { defineComponent, ref, computed } from 'vue';
import LeftView from './LeftView.vue';
import LanguageConfig from 'src/models/LanguageConfig';
import LanguageChip from 'components/LanguageChip.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'stores/global-store';

export interface LanguageListItem {
  label: string;
  code: string;
}
export default defineComponent({
  emits: ['finish', 'to-signin'],
  components: { LeftView, LanguageChip },
  setup(_, { emit }) {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const languageList = computed(() => globalStore.languageConfig);
    const filterStr = ref('');
    const selectedLanguage = ref<LanguageConfig[]>([]);
    return {
      filterStr,
      languageList,
      selectedLanguage,
      async submit() {
        const selectedCode = selectedLanguage.value.map((lang) => {
          return lang.code;
        });
        await userStore.setLanguage(selectedCode);
        emit('finish');
      },
      async skip() {
        await userStore.setLanguage([]);
        emit('finish');
      },
    };
  },
});
</script>
<style lang="sass" scoped>
.language-selector-view
  width: 100vw
  height: 100vh
  box-sizing: border-box
  .left
    background-color: #141414
    .hello-text
      color: $sub
      font-size: 16px
      cursor: default
      line-height: 2em
  .right
    position: relative
    background-color: #1C1C1C
    .title
      font-size: 23px
    .description
      font-size: 16px
      color: $sub
    .close
      position: absolute
      top: 24px
      right: 24px
    .selector-container
      background-color: $primary
.top-bar
  color: $sub
</style>
